<template>
    <div id="home">
      <!--轮播-->
      <mt-swipe :auto="4000" style="height: 260px;">
        <mt-swipe-item v-for="item in imgs"><img :src="item.img" :key="item.id" class="lunbo"></mt-swipe-item>
      </mt-swipe>
      <!--九宫格-->
      <div class="grids">
         <ul class="grids-con">
           <li v-for="grid in grids">
             <router-link :to="grid.router">
               <img :src="grid.src">
               <span>{{grid.title}}</span>
             </router-link>
           </li>
         </ul>
      </div>
    </div>
</template>

<script>
  import src1 from '../../assets/新闻资讯.png'
  import src2 from '../../assets/图文分享.png'
  import src3 from '../../assets/商品展示.png'
  import src4 from '../../assets/留言反馈.png'
  import src5 from '../../assets/资讯.png'
  import src6 from '../../assets/购物车空.png'

  var grids=[
    {id:1,src:src1,title:'新闻资讯',router:{name:'news.list'}},
    {id:2,src:src2,title:'图文分享',router:{name:'news.list'}},
    {id:3,src:src3,title:'商品展示',router:{name:'news.list'}},
    {id:4,src:src4,title:'资讯',router:{name:'news.list'}},
    {id:5,src:src5,title:'留言反馈',router:{name:'news.list'}},
    {id:6,src:src6,title:'联系我们',router:{name:'news.list'}},
    ]
    export default {
        name: "home",
        data(){
          return{
            imgs:[],
            grids:grids
          }
        },
        created(){
          this.$axios.get('getlunbo').then(res=>{
            this.imgs=res.data.message;
            console.log(this.imgs)
          }).catch(err=>{
            console.log('轮播数据异常',err)
          })
        }
    }
</script>

<style scoped>
  a{
    text-decoration: none;
  }
.lunbo{
  width: 100%;
  height: 100%;
}
  .grids{
    position: relative;
    width: 100%;
    height: 100%;
  }
.grids-con{
  margin: 0;
  padding: 0;
}
.grids-con:after{
  content: '';
  display: block;
  overflow: hidden;
  clear: both;
}
.grids-con li{
  float: left;
  width: 33.333333%;
  list-style: none;
}
.grids-con li>a{
  display: block;
  text-align: center;
  padding: 16px;
}
.grids-con li img{
  width: 45%;
  margin: 0 auto;
}
.grids-con li img,.grids-con li span{
  display: block;
}
</style>
